<template>
  <div>
    <div class="form" >
      <div>
        房间号：<el-input style="width: 200px;" v-model="keyWord.kjhm" placeholder="输入房间号"></el-input>
      </div>
      <div>
        项目名称：<el-input style="width: 200px;" v-model="keyWord.xmmc" placeholder="请输入项目名称"></el-input>
      </div>
      <div>
        提交时间：<el-date-picker v-model="keyWord.jcsj" type="date" placeholder="选择记录提交时间"></el-date-picker>
      </div>
      <div>
        状态
        <el-select v-model="keyWord.status" placeholder="请选择项目类型">
          <el-option
              v-for="item in sfhgSel"
              :key="item.keyvalue"
              :label="item.keyname"
              :value="item.keyvalue">
          </el-option>
        </el-select>
      </div>
      <div>
        <el-button type="primary" icon="el-icon-search" @click="showXmkjDsjl()">搜索</el-button>
      </div>
    </div>
    <div style="padding: 0 80rem 5px 0">
      <el-button type="primary" icon="el-icon-plus"
                 @click="newXmkjDsjldialogVisible = true" v-permission="'addXmfjDsjl'">新增</el-button>
    </div>
    <el-table :data="xmJdjlList" border class="etable">
      <el-table-column align="center" prop="xmfjHm" label="房间号码">
      </el-table-column>
      <el-table-column align="center" prop="xmMc" label="项目名称">
      </el-table-column>
      <el-table-column align="center" prop="xmfjDsjlTjrmc" label="提交人">
      </el-table-column>
      <el-table-column align="center" prop="xmfjDsjlJcsj" label="提交时间">
      </el-table-column>
      <el-table-column align="center" prop="xmfjDsjlSfhg" label="状态">
        <template slot-scope="scope">
          <el-tag effect="dark" type="primary" v-if="scope.row.status === '0'">未提交</el-tag>
          <el-tag effect="dark" type="primary" v-if="scope.row.status === '1'">已提交</el-tag>
          <el-tag effect="dark" type="success" v-if="scope.row.status === '2'">合格</el-tag>
          <el-tag effect="dark" type="danger" v-if="scope.row.status === '-1'">不合格</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="xmfjDsjlZp" label="清洁照片" width="150px" header-align="center" align="center">
        <template #default="scope">
          <el-image
              style="width: 100px; height: 100px"
              :src="require('../../assets/dsjl/'+scope.row.xmfjDsjlZp)"
              :preview-src-list="[require('../../assets/dsjl/'+scope.row.xmfjDsjlZp)]">
          </el-image>
          <el-button v-if="scope.row.status === '0'" @click="toupxmfjDsjlZp(scope.row.xmfjDsjlBh)" type="text" size="small" v-permission="'addXmfjDsjl'">上传图片
          </el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="xmfjDsjlSprmc" label="审批人">
      </el-table-column>
      <el-table-column align="center" prop="xmfjDsjlYj" label="审批意见">
      </el-table-column>
      <el-table-column align="center" fixed="right" label="操作" width="350px">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status === '0'" @click="toupXmfjDsjl(scope.row.xmfjDsjlBh)" type="primary" size="small" v-permission="'addXmfjDsjl'">修改
          </el-button>
          <el-button v-if="scope.row.status === '0'" @click="tijiaoXmfjDsjl(scope.row.xmfjDsjlBh,scope.row.xmfjDsjlZp)" type="success" size="small" v-permission="'tijiaoXmfjDsjl'" >提交
          </el-button>
          <el-button v-if="scope.row.status === '1'" @click="toapprovalxmkjDsjl(scope.row.xmfjDsjlBh)" type="success" size="small" v-permission="'approvalXmfjDsjl'" >审批
          </el-button>
          <el-button @click="toDsjlDetail(scope.row.xmfjDsjlBh)" type="info" size="small" >详情
          </el-button>
          <el-popconfirm  v-if="scope.row.status === '0'" style="margin-left: 10px;" title="确定删除该打扫记录吗？"
                         @confirm="delDsjl(scope.row.xmfjDsjlBh)" v-permission="'removeXmfjDsjl'">
            <el-button slot="reference" size="mini" type="danger">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination ref="fenye" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="pageNo" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize"
                     layout="total, sizes, prev, pager, next, jumper" :total="size">
      </el-pagination>
    </div>

    <el-dialog ref="upXmDsjlDia" title="修改项目进度记录" :visible.sync="upXmkjDsjldialogVisible" width="30%">
      <el-form :model="upXmDsjl">
        <el-form-item label="项目名称" label-width="100px">
          <el-input v-model="upXmDsjl.xmMc" autocomplete="off" disabled ></el-input>
        </el-form-item>
        <el-form-item label="房间号" label-width="100px">
          <el-input v-model="upXmDsjl.xmfjHm" autocomplete="off" disabled ></el-input>
        </el-form-item>
        <el-form-item label="打扫情况" label-width="100px">
          <el-input v-model="upXmDsjl.dsjlQkgs" autocomplete="off" type="textarea" :rows="3" ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="upXmkjDsjldialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="upXmkjDsjl()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="上传项目进度记录照片" :visible.sync="upXmkjDsjlZpdialogVisible" width="30%">
        <el-upload class="avatar-uploader"
                   action="http://localhost:8089/xmfjDsjl/uploadDSFJ"
                   :show-file-list="false"
                   :on-remove="handleRemove"
                   :on-success="handleAvatarSuccessUP"
                   :data="{'upxmfjDsjlBh':upxmfjDsjlBh}"
                   :before-upload="beforeAvatarUpload"
                   style="display: inline-block;width: 300px"
        >
          <i class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
    </el-dialog>

    <el-dialog title="新增项目空间打扫记录" :visible.sync="newXmkjDsjldialogVisible" width="30%">
      <el-form :model="newXmDsjl">
        <el-form-item label="项目名称" label-width="100px">
          <el-input v-model="newXmDsjl.xmMc" autocomplete="off" disabled ></el-input>
        </el-form-item>
        <el-form-item label="房间号" label-width="100px">
          <el-input v-model="newXmDsjl.xmfjHm" autocomplete="off" disabled ></el-input>
        </el-form-item>
        <el-form-item label="打扫情况" label-width="100px">
          <el-input v-model="newXmDsjl.dsjlQkgs" autocomplete="off" type="textarea" :rows="3" ></el-input>
        </el-form-item>
        <br/>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="newXmkjDsjldialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addXmkjDsjl()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="项目空间打扫记录详情" :visible.sync="xmkjDsjlDetaildialogVisible" width="30%">

      <el-descriptions column="1" border>
        <el-descriptions-item label="项目名称">{{ xmDsjlDetail.xmMc }}</el-descriptions-item>
        <el-descriptions-item label="房间号">{{ xmDsjlDetail.xmfjHm }}</el-descriptions-item>
        <el-descriptions-item label="打扫情况">{{ xmDsjlDetail.dsjlQkgs }}</el-descriptions-item>
        <el-descriptions-item label="打扫照片"><img :src="xmDsjlDetail.xmfjDsjlZp" class="avatar"></el-descriptions-item>
        <el-descriptions-item label="是否审批通过">
          <el-tag v-if="xmDsjlDetail.status == '2'" size="small" type="primary">审批通过</el-tag>
          <el-tag v-if="xmDsjlDetail.status == '-1'" size="small" type="danger">已驳回</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="审批意见/驳回意见">{{ xmDsjlDetail.xmfjDsjlYj }}</el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="xmkjDsjlDetaildialogVisible = false">确 定</el-button>
        <el-button @click="xmkjDsjlDetaildialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>


    <el-dialog title="审批项目空间打扫记录" :visible.sync="approvalxmkjDsjldialogVisible" width="30%">

      <el-descriptions column="1" border>
        <el-descriptions-item label="项目名称">{{ approvalxmkjDsjl.xmMc }}</el-descriptions-item>
        <el-descriptions-item label="房间号">{{ approvalxmkjDsjl.xmfjHm }}</el-descriptions-item>
        <el-descriptions-item label="打扫情况">{{ approvalxmkjDsjl.dsjlQkgs }}</el-descriptions-item>
        <el-descriptions-item label="打扫照片"><img :src="approvalxmkjDsjl.xmfjDsjlZp" class="avatar"></el-descriptions-item>

      </el-descriptions>
        <el-form :model="approvalxmkjDsjl">
          <el-form-item label="是否审批通过" label-width="120px">
            <el-radio v-model="approvalxmkjDsjl.status" label="2">审批通过</el-radio>
            <el-radio v-model="approvalxmkjDsjl.status" label="-1">驳回</el-radio>
          </el-form-item>
          <el-form-item label="审批意见/驳回意见" label-width="80px">
            <el-input v-model="approvalxmkjDsjl.xmfjDsjlYj" autocomplete="off" type="textarea" :rows="3" ></el-input>
          </el-form-item>
        </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="approvalxmkjDsjlFun()">确 定</el-button>
        <el-button @click="xmkjDsjlDetaildialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {queryXmfjDsjl,saveXmkjDsjl,approvalXmfjDsjl} from "@/api/cxcyxm"
import axios from "../../axios/axios.js";

export default {
  data() {
    return {
      upXmkjDsjlZpdialogVisible:false,
      sfytp:false,
      upxmfjDsjlZp:"",
      upxmfjDsjlBh:"",
      pageNo: 1,
      pageSize: 5,
      totalSize: 0,
      keyWord:{
        kjhm:"",
        xmBh:localStorage.getItem("xmBh"),
        jcsj:"",
        status:""
      },
      sfhgSel:[{keyname:"全部",keyvalue:""},
          {keyname:"合格",keyvalue:"2"},
          {keyname:"已提交",keyvalue:"1"},
        {keyname:"不合格",keyvalue:"-1"},
        {keyname:"未审批",keyvalue:"0"},
      ],
      size: 0,
      loading: true,
      xmJdjlList: [],
      newXmkjDsjldialogVisible: false,
      newXmDsjl:{
        xmBh:localStorage.getItem("xmBh"),
        xmMc:localStorage.getItem("xmMc"),
        xmfjHm:localStorage.getItem("xmKjhm"),
        xmfjBh:localStorage.getItem("xmKj"),
        dsjlQkgs:"",
        xmfjDsjlZp:""
      },
      zp:"",
      upXmkjDsjldialogVisible: false,
      upXmDsjl:{
      },
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      xmDsjlDetail:{},
      xmkjDsjlDetaildialogVisible:false,
      approvalxmkjDsjldialogVisible:false,
      approvalxmkjDsjl:{},
      roleBh:localStorage.getItem("roleBh"),
    }
  },
  created() {
    this.showXmkjDsjl()
  },
  methods: {
    showXmkjDsjl() {
      if (this.roleBh !== "R2004"){
        this.keyWord.xmBh = ""
      }
      queryXmfjDsjl({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        keyWord:this.keyWord
      }).then(res => {
        if (res.code !== "200") {
          this.$message.error(res.msg);
        } else {
          this.xmJdjlList = res.data.rows
          this.size = res.data.total
          this.totalSize = res.data.pageNums
          this.loading = false;
        }
      })
    },
    handleSizeChange(val) {
      this.pageSize = parseInt(`${val}`);
      this.pageNo = 1;
      queryXmfjDsjl({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        keyWord:this.keyWord
      }).then(res => {
        if (res.code === "200") {
          this.xmJdjlList = res.data.rows
          this.size = res.data.total
          this.totalSize = res.data.pageNums
          this.loading = false;
        } else {
          this.$message.error(res.msg);
        }

      })
    },
    handleCurrentChange(val) {
      this.pageNo = parseInt(`${val}`);
      if (this.pageNo > this.totalSize) {
        this.pageNo = this.totalSize
      }

      queryXmfjDsjl(
          {
            pageNo: this.pageNo,
            pageSize: this.pageSize,
            keyWord:this.keyWord
          }).then(res => {
        if (res.code === "200") {
          this.xmJdjlList = res.data.rows
          this.size = res.data.total
          this.totalSize = res.data.pageNums
          this.loading = false;
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    handleClose() {
      this.dialogVisible = false
    },
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      console.log("this.dialogImageUrl",this.dialogImageUrl)
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    addXmkjDsjl(){
      saveXmkjDsjl(this.newXmDsjl).then(res =>{
        if (res.code === "200") {
          this.newXmkjDsjldialogVisible = false
          this.$message.success(res.msg)
          this.showXmkjDsjl()
          this.$router.go(0)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    upXmkjDsjl(){
      saveXmkjDsjl(this.upXmDsjl).then(res =>{
        if (res.code === "200") {
          this.upXmkjDsjldialogVisible = false
          this.$message.success(res.msg)
          this.showXmkjDsjl()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    toupXmfjDsjl(xmfjDsjlBh){
      this.upxmfjDsjlBh = xmfjDsjlBh
      axios({
        method: 'POST',
        url: '/xmfjDsjl/getXmfjDsjlDetail/' + xmfjDsjlBh
      }).then(res => {
        if (res.code === "200") {
          this.upXmDsjl = res.data
          this.upXmkjDsjldialogVisible = true
        } else {
          this.$message.error(res.msg)
        }

      })
    },
    delDsjl(xmfjDsjlBh){
      axios({
        method: 'POST',
        url: '/xmfjDsjl/removeXmfjDsjl/' + xmfjDsjlBh
      }).then(res => {
        if (res.code === "200") {
          this.$message.success(res.msg)
          this.showXmkjDsjl()
        } else {
          this.$message.error(res.msg)
        }

      })
    },
    tijiaoXmfjDsjl(xmfjDsjlBh,zp){
      if (zp == "img.png"){
        this.$message.warning("请先上传打扫照片！")
      }else {
        axios({
          method: 'POST',
          url: '/xmfjDsjl/tijiaoXmfjDsjl/' + xmfjDsjlBh
        }).then(res => {
          if (res.code === "200") {
            this.$message.success(res.msg)
            this.showXmkjDsjl()
          } else {
            this.$message.error(res.msg)
          }

        })
      }

    },
    toDsjlDetail(xmfjDsjlBh){
      axios({
        method: 'POST',
        url: '/xmfjDsjl/getXmfjDsjlDetail/' + xmfjDsjlBh
      }).then(res => {
        if (res.code === "200") {
          this.xmDsjlDetail = res.data
          this.xmDsjlDetail.xmfjDsjlZp = require("../../assets/dsjl/"+res.data.xmfjDsjlZp)
          this.xmkjDsjlDetaildialogVisible = true
        } else {
          this.$message.error(res.msg)
        }

      })
    },
    toapprovalxmkjDsjl(xmfjDsjlBh){
      axios({
        method: 'POST',
        url: '/xmfjDsjl/getXmfjDsjlDetail/' + xmfjDsjlBh
      }).then(res => {
        if (res.code === "200") {
          this.approvalxmkjDsjl = res.data
          this.approvalxmkjDsjl.status = "2"
          this.zp = res.data.xmfjDsjlZp
          this.approvalxmkjDsjl.xmfjDsjlZp = require("../../assets/dsjl/"+res.data.xmfjDsjlZp)
          this.approvalxmkjDsjldialogVisible = true
        } else {
          this.$message.error(res.msg)
        }

      })
    },
    approvalxmkjDsjlFun(){
      this.approvalxmkjDsjl.xmfjDsjlZp = this.zp
      approvalXmfjDsjl(this.approvalxmkjDsjl).then(res =>{
        if (res.code === "200") {
          this.approvalxmkjDsjldialogVisible = false
          this.$message.success(res.msg)
          this.showXmkjDsjl()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    updateAvatar(){
      this.showUpLoad = true
    },
    handleAvatarSuccessUP(res, file) {
      console.log("res",res)
      this.$message.success("图片上传成功")
      this.upXmkjDsjlZpdialogVisible = false
      this.showXmkjDsjl()
      this.$router.go(0)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    toupxmfjDsjlZp(xmfjDsjlBh){
      this.upXmkjDsjlZpdialogVisible = true
      this.upxmfjDsjlBh = xmfjDsjlBh
    }
  }
}
</script>

<style>
.form{
  width:90% !important;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  /*right: -5%;*/
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20px 0 20px 0;
}
.etable{
  width: 90%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
